<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>


<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        var username = '${Username}';
        if(username === ''){
            $("#showUsername").html("请<a href=\"${pageContext.request.contextPath}/system/login\">登录</a>\n" +
                "                            <span><a href=\"${pageContext.request.contextPath}/system/register\">免费注册</a></span>")
        }else{
            $("#showUsername").html(""+username+" <a href='${pageContext.request.contextPath}/login/logout'>退出登录</a>");
        }
    });
</script>
<%--<script>--%>
<%--    $.ajax({--%>
<%--        url:'${pageContext.request.contextPath}/goods/Categories', 			    	//数据请求路径--%>
<%--        type:'POST',			    //这里用post方式=--%>
<%--        async: false,		 	    //同步：true,异步：false;这里同步异步都可以，看自己的需求--%>
<%--        dataType:'json',			//返回的数据格式--%>
<%--        success: function(result){--%>
<%--            catList=result;--%>
<%--            console.log(catList)--%>
<%--        }--%>
<%--    });--%>
<%--</script>--%>
<!-- 顶部 -->

<div class="top-bar">
    <div class="container">
        <p>划水商城欢迎您！</p>
        <p id="showUsername">

        </p>
        <div class="right-sec">
            <ul>
<%--                <li><a href="${pageContext.request.contextPath}/system/login">登录</a>/<a href="#">注册 </a></li>--%>
                <li><a href="${pageContext.request.contextPath}/system/toHome?username=${Username}&currentPage=1">我的订单 </a></li>
                <li><a href="${pageContext.request.contextPath}/system/toHome?username=${Username}&currentPage=1">个人中心 </a></li>
                <li><a href="${pageContext.request.contextPath}/system/toBackStageLogin">后台管理 </a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 搜索商品框 -->
<header>
    <div class="container">
        <div class="logo"> <a href="${pageContext.request.contextPath}/"><img src="${pageContext.request.contextPath}/static2/images/logo.jpg" alt="" ></a> </div>
        <div class="search-cate">
            <select class="selectpicker">
                <option> 全部商品</option>
                <option> 电脑办公</option>
                <option> 手机数码</option>
                <option> 游戏娱乐</option>
            </select>
            <input id="autocomplete" type="search" placeholder="搜索商品">
            <button id="searchg" class="submit" type="submit"><i class="icon-magnifier"></i></button>
            <script>
                $(function () {
                    $("#searchg").click(function () {
                        location.href = '${pageContext.request.contextPath}/goods/searchGoods?goods_name='+$("#autocomplete").val()+'&currentPage=1'
                    })
                })
            </script>
        </div>

        <!-- 购物车按钮 -->
        <ul class="nav navbar-right cart-pop">
            <li class="dropdown">
                <a href="${pageContext.request.contextPath}/goods/toCart?username=${Username}" target="_blank"  aria-haspopup="true" aria-expanded="false">
                    <i class="flaticon-shopping-bag"></i><br>
                    <strong>我的购物车</strong>
                </a>
            </li>
        </ul>
    </div>

    <!-- Nav -->
    <nav class="navbar ownmenu">
        <div class="container">

            <!-- 菜单栏 -->
            <div class="cate-lst"> <a  data-toggle="collapse" class="cate-style" href="#cater"><i class="fa fa-list-ul"></i> 全 部 商 品 </a>
                <div class="cate-bar-in">
                    <div id="cater" class="collapse">
                        <ul>
                            <c:forEach items="${catList}" var="cat">
                            <li class="sub-menu"><a href="${pageContext.request.contextPath}/goods/goodsList?cat_id=${cat.cat_id}&currentPage=1">${cat.cat_name}</a></li>
                            </c:forEach>
<%--                            <li class="sub-menu"><a href="#"> 手机数码</a></li>--%>
<%--                            <li class="sub-menu"><a href="#"> 游戏娱乐</a></li>--%>
<%--                            <li class="sub-menu"><a href="#"> 运动健康</a></li>--%>
<%--                            <li class="sub-menu"><a href="#"> 家用电器</a></li>--%>
<%--                            <li class="sub-menu"><a href="#"> 母婴玩具</a></li>--%>
<%--                            <li class="sub-menu"><a href="#"> 图书音像</a></li>--%>
<%--                            <li class="sub-menu"><a href="#"> 汽车用品</a></li>--%>
<%--                            <li class="sub-menu"><a href="#"> 家装厨具</a></li>--%>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 导航条 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-open-btn" aria-expanded="false"> <span><i class="fa fa-navicon"></i></span> </button>
            </div>
            <!-- 导航栏 -->
            <div class="collapse navbar-collapse" id="nav-open-btn">
                <ul class="nav">
                    <li><a href="${pageContext.request.contextPath}/">首页 </a></li>
                    <li><a href="${pageContext.request.contextPath}/system/toDeveloping"> 服装城 </a></li>
                    <li><a href="${pageContext.request.contextPath}/system/toDeveloping"> 美妆馆 </a></li>
                    <li><a href="${pageContext.request.contextPath}/system/toDeveloping"> 划水超市 </a></li>
                    <li><a href="${pageContext.request.contextPath}/system/toDeveloping"> 全球购 </a></li>
                </ul>
            </div>

            <!-- 售后 -->
            <div class="nav-right"> <span class="call-mun"><i class="fa fa-phone"></i> <strong>售后服务:</strong> (+100) 123 456 7890</span> </div>
        </div>
    </nav>
</header>


